<template>
  <fieldset>
    <legend>Input组件</legend>
    <input type="text"
           v-model="val">
    <!-- 子组件 -->
    <button @click="add">添加</button>
  </fieldset>
</template>
<script>


  //1.获取输入框的值
  //2.给点击按钮注册事件

  //父组件传子组件的流程

  //1.首先在子组件的标签上面,使用v-bind动态的绑定一个属性data

  //2.在子组件的选项中,使用props属性接受传递的参数data

  export default {
    data() {
      return {
        val: ""
      }
    },
    mounted() {
      this.$bus.$on("clear", () => {
        this.val = "";
        //this.$bus.$off("clear") //卸载掉事件监听
      })


    },
    methods: {
      add() {
        //通过bus将内容发射出去
        this.$bus.$emit('add-todo', this.val)
      }
    }
  }
</script>